<template>
  <!-- 报告简述 -->
  <div class="briefly-wrap page is-show">
    <div class="page-content-wrap">

      <!-- 页开始 -->
      <div class="page-content">
        <div class="row">
          <form class="form-horizontal">
            <div class="form-group col-xs-8">
              <label class="col-xs-1 control-label"></label>
              <label class="col-xs-11 control-label font-bold text-left cid"></label>
            </div>
            <div class="form-group col-xs-12">
              <div class="row">
                <div class="text-center">
                  <h3 class="h3" style="letter-spacing: 2px;">消防设施维护保养</h3>
                </div>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <div>
                <div class="pro-info">
                  <div class="col-xs-5 text-left no-padding font-bold">项目名称：{{proname}}</div>
                  <div class="col-xs-2 no-padding text-right font-bold">项目编号：</div>
                  <div class="col-xs-5 no-padding">
                    <input type="text" placeholder="请输入项目编号" class="form-control no-border no-padding font-bold" v-model="currentPronum">
                  </div>
                  <!-- <label class="col-xs-7 control-label no-padding">项目编号：<input type="text" name="owner" class="form-control no-border" v-model="pronum"></label> -->
                </div>
                <!-- 切换项目概况类型的按钮 -->
                <el-tooltip class="item print-none" effect="dark" content="切换项目概况模板" placement="bottom">
                  <el-button v-if="status != 2" type="primary" icon="el-icon-sort" size="mini" circle class="change-overView-type-btn print-none" @click="changeOverview"></el-button>
                </el-tooltip>
                <table cellspacing="0" cellpadding="0" border="0">
                  <col width="105px" />
                  <col/>
                  <tbody>
                    <tr>
                      <td class="text-center vCenter">委托单位：</td>
                      <td colspan="3">
                        <input type="text" name="owner" class="form-control no-border" v-model="formData.owner">
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">项目名称：</td>
                      <td colspan="3">
                        <input type="text" name="proName" class="form-control no-border" v-model="formData.proname">
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">项目地址：</td>
                      <td colspan="3">
                        <input type="text" name="proAddr" class="editable form-control no-border" v-model="formData.period">
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">项目概况：</td>
                      <td colspan="3">
                        <div v-show="formData.type==1" class="col-xs-12" style="padding-left: 0;">
                          <div class="col-xs-3 no-padding">
                            <div class="col-xs-6 no-padding">
                              <input type="text" readonly disabled class="form-control no-border text-right" value="建筑高度">
                            </div>
                            <div class="col-xs-4 no-padding">
                              <input type="number" name="proHigh" class="editable form-control border-bottom" v-model="formData.prohigh">
                            </div>
                            <div class="col-xs-2 no-padding">
                              <input type="text" readonly disabled class="form-control no-border no-padding" value="m">
                            </div>
                          </div>
                          <div class="col-xs-3 no-padding">
                            <div class="col-xs-5 no-padding">
                              <input type="text" readonly disabled class="form-control no-border text-right" value="建筑面积">
                            </div>
                            <div class="col-xs-6 no-padding">
                              <span class="col-xs-12 block input-icon input-icon-right no-padding">
                                <input type="number" name="proArea" class="editable form-control border-bottom" v-model="formData.proarea">
                              </span>
                            </div>
                            <div class="col-xs-1 no-padding">
                              <input type="text" readonly disabled class="form-control no-border no-padding" value="㎡">
                            </div>
                          </div>
                          <div class=" col-xs-3 no-padding">
                            <div class="col-xs-7 no-padding">
                              <input type="text" readonly disabled class="form-control no-border text-right" value="建筑层数">
                            </div>
                            <div class="col-xs-4 no-padding">
                              <input type="number" name="proFloor" class="editable form-control border-bottom" v-model="formData.profloor">
                            </div>
                            <div class="col-xs-1 no-padding">
                              <input type="text" readonly disabled class="form-control no-border no-padding" value="层">
                            </div>
                          </div>
                          <div class=" col-xs-3 no-padding">
                            <div class="col-xs-7 no-padding">
                              <input type="text" readonly disabled class="form-control no-border text-right" value="使用性质">
                            </div>
                            <div class="col-xs-5 no-padding">
                              <input type="text" name="proType" class="editable form-control border-bottom" v-model="formData.protype">
                            </div>
                          </div>
                        </div>
                        <div v-show="formData.type==2" class="col-xs-12">
                          <span class="col-xs-12 block input-icon input-icon-right">
                            <textarea class="editable print-noborder" name="projectOverview" maxlength="1000" v-model="formData.projectOverview"></textarea>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">维保时间：</td>
                      <td colspan="3"><input type="text" id="workdate" class="form-control no-border" v-model="formData.time"></td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">维保依据：</td>
                      <td colspan="3">
                        <input type="text" name="normal" readonly disabled class="editable form-control no-border" value="《建筑消防设施的维护管理》 GB25201-2010">
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">建筑消防设施内容：</td>
                      <td colspan="3">
                        <div class="col-xs-12" id="systemList">
                          <span class="col-xs-4" v-for="(item, index) in formData.fireSystem" :key="index">
                            <input name="system" type="checkbox" readonly disabled class="editable" :checked="item.flag == 1 || false" :flag="item.flag" :value="item.sysId">{{item.system}}
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center vCenter">本次维保情况简述：</td>
                      <td colspan="3">
                        <div class="col-xs-12">
                          <span class="col-xs-12 block input-icon input-icon-right">
                            <textarea class="editable print-noborder" name="summary" maxlength="1000" v-model="formData.summary"></textarea>
                          </span>
                        </div>
                        <div class="col-xs-12">
                          <span class="col-xs-12 text-right"> (维保专用章) </span>
                        </div>
                        <div class="col-xs-10 no-padding">
                          <input type="text" readonly disabled class="form-control no-border text-right" value="编制日期：">
                        </div>
                        <div class="col-xs-2 no-padding">
                          <input type="text" name="normal" class="editable form-control no-border" v-model="formData.writedate">
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- 页结束 -->

      <div class="page-break"></div>

      <!-- 页开始 -->
      <div class="page-content">
        <div class="row">
          <form class="form-horizontal">
            <div class="form-group col-xs-12">
              <table cellspacing="0" cellpadding="0" border="0">
                <col width="105px"/>
                <col/>
                <col width="95px"/>
                <col/>
                <tbody>
                  <tr>
                    <td class="text-center vCenter" rowspan="2">维保报告签收确认：</td>
                    <td colspan="3" style="padding-top:15px;">
                      <div class="confirm form-group col-xs-12">
                        <div class="col-xs-4">
                          <input type="text" readonly disabled class="form-control no-border text-right" value="委托单位意见：">
                        </div>
                        <div class="col-xs-8">
                          <span class="col-xs-12 block input-icon input-icon-right">
                            <textarea readonly disabled class="editable no-border print-noborder"></textarea>
                          </span>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3" style="padding-top:15px;">
                      <div class="confirm form-group col-xs-12">
                        <div class="col-xs-4">
                          <input type="text" readonly disabled class="form-control no-border text-right" value="委托单位签字：">
                        </div>
                        <div class="col-xs-8">
                          <input type="text" name="sign" readonly disabled class="form-control border-bottom">
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-center vCenter">备注:</td>
                    <td colspan="3">
                      <div class="col-xs-12">
                        <textarea readonly disabled class="editable print-noborder" name="memo"></textarea>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-center vCenter">项目负责人：</td>
                    <td class="text-center vCenter">
                      <textarea class="no-border print-noborder form-control min-textarea" v-model="formData.manager"></textarea>
                    </td>
                    <td class="text-center vCenter">作业人员：</td>
                    <td class="text-center vCenter" id="workers">
                      <textarea class="no-border print-noborder form-control min-textarea" v-model="formData.workers"></textarea>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>
        </div>
      </div>
      <!-- 页结束 -->

    </div>
    <div class="page-break"></div>
  </div>
</template>
<script>
export default {
  name: 'Briefly',
  props: {
    initData: {
      type: Object,
    },
    status: {
      required: true,
    },
    proname: {},
    pronum: {},
  },
  data() {
    return {
      currentPronum: this.pronum,
      formData: {
        owner: '', // 委托单位
        proname: '', // 项目名称
        period: '', // 项目地址
        type: 1, // 概况类型 1是默认类型，2是自定义类型
        prohigh: '', // 建筑高度
        proarea: '', // 建筑面积
        profloor: '', // 建筑层数
        protype: '', // 使用性质
        projectOverview: '', // 项目概况简述
        time: '', // 维保时间
        fireSystem: '', // 消防设施
        summary: '', // 简介,
        writedate: '', // 编制日期
        manager: '', // 项目负责人
        workers: '', // 作业人员
      },
    }
  },
  created() {
    let that = this
    if (that.initData) {
      that.formData.owner = that.initData.owner // 委托单位
      that.formData.proname = that.initData.proname // 项目名称
      that.formData.period = that.initData.period // 项目地址
      ;(that.formData.type = that.initData.type), // 概况类型
        (that.formData.prohigh = that.initData.prohigh) // 建筑高度
      that.formData.proarea = that.initData.proarea // 建筑面积
      that.formData.profloor = that.initData.profloor // 建筑层数
      that.formData.protype = that.initData.protype // 使用性质
      ;(that.formData.projectOverview = that.initData.projectOverview), // 项目概况简述
        (that.formData.time = that.initData.time) // 维保时间
      that.formData.fireSystem = that.initData.fireSystem // 消防设施
      that.formData.summary = that.initData.summary // 简介,
      that.formData.writedate = that.initData.writedate // 编制日期
      that.formData.manager = that.initData.manager // 项目负责人
      that.formData.workers = that.initData.workers // 作业人员
    }
  },
  methods: {
    // 获取数据
    getData(needChecked) {
      let that = this
      // 校验必填
      if (needChecked) {
        if (that.formData.type == 1) {
          if (!that.formData.prohigh || that.formData.prohigh == '') {
            that.$message({
              message: '请填写建筑高度！',
              type: 'warning',
            })
            return false
          } else if (!that.formData.proarea || that.formData.proarea == '') {
            that.$message({
              message: '请填写建筑面积！',
              type: 'warning',
            })
            return false
          } else if (!that.formData.profloor || that.formData.profloor == '') {
            that.$message({
              message: '请填写层数！',
              type: 'warning',
            })
            return false
          } else if (!that.formData.protype || that.formData.protype == '') {
            that.$message({
              message: '请填写使用性质！',
              type: 'warning',
            })
            return false
          } else {
            return that.formData
          }
        } else {
          if (!that.formData.projectOverview || that.formData.projectOverview == '') {
            that.$message({
              message: '请填写项目概况简述！',
              type: 'warning',
            })
            return false
          } else {
            return that.formData
          }
        }
      } else {
        return that.formData
      }
    },
    // 切换项目概况类型
    changeOverview() {
      let that = this
      if (that.formData.type == 1) {
        that.formData.prohigh = '' // 建筑高度
        that.formData.proarea = '' // 建筑面积
        that.formData.profloor = '' // 建筑层数
        that.formData.protype = '' // 使用性质
        that.formData.type = 2
      } else {
        that.formData.projectOverview = ''
        that.formData.type = 1
      }
    },
  },
  watch: {
    prohigh(val, oldVal) {
      if (val && val < 0) {
        this.formData.prohigh = 0
        this.$message({
          message: '建筑高度不能小于0！',
          type: 'warning',
        })
      }
    },
    proarea(val, oldVal) {
      if (val && val < 0) {
        this.formData.proarea = 0
        this.$message({
          message: '建筑面积不能小于0！',
          type: 'warning',
        })
      }
    },
    pronum(val, oldVal) {
      if (val != oldVal) {
        this.currentPronum = val
      }
    },
    currentPronum(val, oldVal) {
      if (val != oldVal) {
        this.$emit('changePronum', val)
      }
    },
  },
  computed: {
    prohigh() {
      return this.formData.prohigh
    },
    proarea() {
      return this.formData.proarea
    },
  },
}
</script>
<style lang="scss">
.briefly-wrap {
  .page-content {
    .row {
      .form-group {
        .change-overView-type-btn {
          position: absolute;
          top: 155px;
          right: 5px;
          color: #fff !important;
          background-color: #409eff !important;
          border-color: #409eff !important;
          cursor: pointer !important;
        }
      }
    }
  }
}
</style>
